<template>
  <view class="deco-problem-classification" :style="[innerStyle]">
    <zm-tabs
      v-model="tabKey"
      scrollable
      :list="tabs"
      inactive-weight="bold"
      active-weight="bold"
      active-size="32rpx"
      inactive-size="32rpx"
      text-key="name"
      value-key="uuid"
      @change="handleTabChange"
    ></zm-tabs>
    <view v-for="(item, index) in list" :key="index" class="flex items-center justify-between py-18 mx-34" @click="onClickProblem(item)">
      <text class="font-28 mr-24 text-row-1">{{ item.problem }}</text>
      <zm-icon name="arrow" color="#ccc" size="32rpx"></zm-icon>
    </view>
    <zm-empty v-if="!list.length && !loading" text="暂无数据"></zm-empty>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
export default {
  name: "deco-problem-classification",
  mixins: [mixin],
  data() {
    return {
      list: [],
      tabKey: "",
      loading: false
    }
  },
  computed: {
    tabs() {
      return this.data?.data?.list || []
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    // 切换tab
    handleTabChange() {
      this.list = []
      this.handleQuery()
    },
    onClickProblem(data) {
      this.toView({
        url: "pages/person/problem-info/problem-info",
        params: {
          problemId: data.id,
          problem: encodeURIComponent(data.problem)
        }
      })
    },
    async handleQuery() {
      this.loading = true
      this.tabKey ? "" : (this.tabKey = this.tabs[0]?.uuid)
      const questionIds = this.data?.data?.list
        ?.filter((item) => item.uuid === this.tabKey)[0]
        ?.questionList.map((item) => item.id)
        .join(",")
      this.list = await uni.$api.problem.getQuestionList({ questionIds })
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-problem-classification {
  width: 100%;
  display: flex;
  padding: 28rpx 0;
  border-radius: 10rpx;
  flex-direction: column;
  background-color: #fff;
}
</style>
